import React from 'react'
import {
  Form,
  Input,
  Button,
  Dialog,
  TextArea,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
} from "antd-mobile";
import style from './../auth/css/index.module.css'
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate } from 'react-router-dom';
import {zhuceApi} from '../../api/index'
function Zhu() {
    const nav = useNavigate()
    const gologin = () => {
        nav('/login')
        alert('注册成功')
   }
  return (
    <div>
      <div className={style.op}>
        <NavBar onBack={() => nav(-1)}></NavBar>
        <div className={style.ppt}></div>
      </div>
      <div className={style.login}>
        <span
          style={{ fontSize: "30px", marginLeft: "155px", marginTop: "180px" }}
        >
          注册账户
        </span>
      </div>
      <div className={style.jn}>
        <Form
          layout="horizontal"
          mode="card"
          footer={
            <Button
              block
              type="submit"
              color="primary"
              size="large"
              onClick={gologin}
            >
              提交
            </Button>
          }
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
              //  用户名（长度2-15位）
              {
                pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_-]{2,15}$/,
                message: "用户名格式不正确",
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="电子邮箱"
            name="email"
            rules={[
              {
                required: true,
                message: "请输入电子邮箱",
              },
              {
                pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                message: "电子邮箱格式不正确",
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Header />
          <Form.Item
            label="电话"
            name="tel"
            rules={[
              {
                required: true,
                message: "请输入电话",
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "电话格式不正确",
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="出生日期"
            name="birthday"
            rules={[
              {
                required: true,
                message: "请输入出生日期",
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "出生日期格式不正确",
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
              // 密码（长度6-15位）
              {
                pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_-]{6,15}$/,
                message: "密码格式不正确",
              },
            ]}
          >
            <Input placeholder="密码" />
          </Form.Item>
          <Form.Header />
        </Form>
      </div>
    </div>
  );
}

export default Zhu
